<template>
  <div>
    <!-- 面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>生产管理</el-breadcrumb-item>
      <el-breadcrumb-item>产品抽检比例维护</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-row>
        <el-col :span='7'>
          <el-radio-group v-model="queryInfo.location" @change='locationChange'>
            <el-radio label="Vietnam" border size="medium">越南</el-radio>
            <el-radio label="KunShan" border size="medium">昆山</el-radio>
            <el-radio label="ALL" border size="medium">ALL</el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span='7'>
          <el-input class="inline-input" v-model="queryInfo.part_no" placehoder="请输入料号" :clearable='true'
            @clear='searchSamplingRecord'>
            <el-button slot="append" icon="el-icon-search" @click='searchSamplingRecord'></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click='addSamplingRules'>添加抽检规则</el-button>
        </el-col>
      </el-row>
      <!--抽检规则列表区域-->
      <el-table :data="SamplingList" :border="true" :stripe="true"
        :header-cell-style="{'text-align':'center','font-weight':'700','color':'#606266'}"
        :cell-style="{'text-align':'center'}">
        <el-table-column type="index"></el-table-column>
        <el-table-column label="料号" prop="Part_No"></el-table-column>
        <el-table-column label="线别" prop="PD_Line"></el-table-column>
        <el-table-column label="流程名" prop="Process_Name"></el-table-column>
        <el-table-column label="抽检数量" prop="Spot_ChooseAmount"></el-table-column>
        <el-table-column label="抽检总数" prop="Spot_TotalAmount"></el-table-column>
        <el-table-column label="区域" prop="Location">
          <template slot-scope="scope">
            <el-tag :key='scope.row.Location' :type='success' effort='dark'>
              {{scope.row.Location=='KS'?"昆山":"越南"}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="更新人员" prop="Update_By"></el-table-column>
        <el-table-column label="更新时间" prop="Update_Time" :formatter="dateFormat"></el-table-column>
        <el-table-column label="操作" width="180px;">
          <template slot-scope="scope">
            <!--修改-->
            <el-tooltip content="修改规则" placement="bottom" effect="light" :enterable="false">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="editSampling(scope.row)">
              </el-button>
            </el-tooltip>
            <!--删除-->
            <el-tooltip content="删除规则" placement="bottom" effect="light" :enterable="false">
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteSampling(scope.row)">
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="total" background>
      </el-pagination>
    </el-card>

    <!-- 新增抽检规则其他信息-->
    <el-dialog title='添加抽检比例信息' :visible.sync="addDialogVisible" width="80%" @closed='addSamplingFormClosed'
      :close-on-click-modal='false'>
      <!--内容主体区-->
      <el-form :model="addSamplingForm" ref="addSamplingFormRef" :rules="addSamplingFormRules" label-width='100px'>
        <el-row type='flex'>
          <el-col :span='11'>
            <el-form-item label='料号' label-width="150px" prop='PART_NO'>
              <el-input placeholder='请输入料号' v-model='addSamplingForm.PART_NO'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='2'></el-col>
          <el-col :span='11'>
            <el-form-item label='Process_Name' label-width="150px" prop='PROCESS_NAME'>
              <el-input placeholder='请输入Process Name' v-model='addSamplingForm.PROCESS_NAME'></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type='flex'>
          <el-col :span='11'>
            <el-form-item label='线别' label-width="150px" prop='PD_Line'>
              <el-input placeholder='请输入线别' v-model='addSamplingForm.PD_Line'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='2'></el-col>
          <el-col :span='11'>
            <el-form-item label='Location' label-width="150px" prop='Location'>
              <el-select v-model='addSamplingForm.Location' placeholder='请选择地点' style="width: 100%;">
                <el-option v-for="item in location_option" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type='flex'>
          <el-col :span='11'>
            <el-form-item label='抽检总数' label-width="150px" prop='Spot_TotalAmount'>
              <el-input placeholder='请输入抽检总数' v-model='addSamplingForm.Spot_TotalAmount'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='2'></el-col>
          <el-col :span='11'>
            <el-form-item label='抽检数' label-width="150px">
              <el-input placeholder='请输入抽检数' v-model='addSamplingForm.Spot_ChooseAmount' :disabled='true'>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!--底部区-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click='addSamplingContent'>确 定</el-button>
      </span>
    </el-dialog>

    <!--修改抽检规则其他信息-->
    <el-dialog title='修改抽检比例信息' :visible.sync="editDialogVisible" width="80%" @closed='editSamplingFormClosed'
      :close-on-click-modal='false'>
      <!--内容主体区-->
      <el-form :model="editSamplingForm" ref="editSamplingFormRef" :rules="editSamplingFormRules" label-width='100px'>
        <el-row type='flex'>
          <el-col :span='11'>
            <el-form-item label='料号' label-width="150px" prop='Part_No'>
              <el-input placeholder='请输入料号' v-model='editSamplingForm.Part_No' :disabled='true'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='2'></el-col>
          <el-col :span='11'>
            <el-form-item label='Process_Name' label-width="150px" prop='Process_Name'>
              <el-input placeholder='请输入Process Name' v-model='editSamplingForm.Process_Name' :disabled='true'>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type='flex'>
          <el-col :span='11'>
            <el-form-item label='线别' label-width="150px" prop='PD_Line'>
              <el-input placeholder='请输入线别' v-model='editSamplingForm.PD_Line' :disabled='true'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='2'></el-col>
          <el-col :span='11'>
            <el-form-item label='Location' label-width="150px" prop='Location'>
              <el-select v-model='editSamplingForm.Location' placeholder='请选择地点' style="width: 100%;">
                <el-option v-for="item in location_option" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type='flex'>
          <el-col :span='11'>
            <el-form-item label='抽检总数' label-width="150px" prop='Spot_TotalAmount'>
              <el-input placeholder='请输入抽检总数' v-model='editSamplingForm.Spot_TotalAmount'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='2'></el-col>
          <el-col :span='11'>
            <el-form-item label='抽检数' label-width="150px">
              <el-input placeholder='请输入抽检数' v-model='editSamplingForm.Spot_ChooseAmount' :disabled='true'>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!--底部区-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click='editSamplingContent'>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      const validateNumber = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('不能为空'))
        } else if (!(/^[1-9]\d*$/.test(value))) {
          callback(new Error('请输入正确的数字'))
        } else {
          callback()
        }
      }
      return {
        editDialogVisible: false, // 控制是否显示修改抽检规则德dialog
        addDialogVisible: false, // 控制是否显示新增抽检规则的dialog
        success: '', // 不知道有啥用。但是没声明就报错。。。
        queryInfo: {
          part_no: '',
          location: 'ALL',
          pagenum: 1,
          pagesize: 10
        },
        SamplingList: [],
        total: 0,
        addSamplingForm: {
          PART_NO: '',
          PROCESS_NAME: '',
          PD_Line: '',
          Location: '',
          Spot_ChooseAmount: 1,
          Spot_TotalAmount: 0,
          Update_By: window.sessionStorage.getItem('loginUserName')
        },
        editSamplingForm: {
          Part_No: '',
          Process_Name: '',
          PD_Line: '',
          Location: '',
          Spot_ChooseAmount: 0,
          Spot_TotalAmount: 0,
          Update_By: window.sessionStorage.getItem('loginUserName')
        },
        location_option: [{
          value: 'VN',
          label: '越南'
        }, {
          value: 'KS',
          label: '昆山'
        }, {
          value: 'ALL',
          label: 'ALL'
        }],
        addSamplingFormRules: {
          PART_NO: [{
            required: true,
            message: '请输入料号',
            trigger: 'blur'
          }],
          PROCESS_NAME: [{
            required: true,
            message: '请输入PROCESS_NAME',
            trigger: 'blur'
          }],
          PD_Line: [{
            required: true,
            message: '请输入线别',
            trigger: 'blur'
          }],
          Spot_TotalAmount: [{
            validator: validateNumber,
            trigger: 'blur'
          }]
        },
        editSamplingFormRules: {
          Part_No: [{
            required: true,
            message: '请输入料号',
            trigger: 'blur'
          }],
          Process_Name: [{
            required: true,
            message: '请输入PROCESS_NAME',
            trigger: 'blur'
          }],
          PD_Line: [{
            required: true,
            message: '请输入线别',
            trigger: 'blur'
          }],
          Spot_TotalAmount: [{
            validator: validateNumber,
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      async searchSamplingRecord() {
        const {
          data: res
        } = await this.$http.post('/ProductManagment/SampleRateSetting/SearchSampleRateRecord', this.queryInfo)
        if (res.meta.status !== 200) {
          return this.$message.error('获取抽检比例列表失败')
        }
        this.SamplingList = res.data.partNoList
        this.total = res.data.total
      },
      // 监听pageSize改变的事件
      handleSizeChange(val) {
        this.queryInfo.pagesize = val
        this.searchSamplingRecord()
        console.log(`每页 ${val} 条`)
      },
      // 监听页码值改变事件
      handleCurrentChange(val) {
        this.queryInfo.pagenum = val
        this.searchSamplingRecord()
        console.log(`当前页: ${val}`)
      },
      locationChange(val) {
        this.searchSamplingRecord()
      },
      // 关闭新增料号dialog事件
      addSamplingFormClosed() {
        this.$refs.addSamplingFormRef.resetFields()
      },
      editSamplingFormClosed() {
        this.$refs.editSamplingFormRef.resetFields()
      },
      // 开启dialog
      addSamplingRules() {
        this.addDialogVisible = true
      },
      // 开启edit的dialog
      editSampling(obj) {
        this.editSamplingForm = obj
        console.log(this.editSamplingForm)
        this.editDialogVisible = true
      },
      // 塞入数据
      addSamplingContent() {
        this.$refs.addSamplingFormRef.validate(async valid => {
          if (!valid) {
            return
          }
          const {
            data: res
          } = await
          this.$http.post('/ProductManagment/SampleRateSetting/InsertSamplingInfo', this.addSamplingForm)
          if (res.meta.status !== 200) {
            // 添加料号扩展信息失败
            return this.$message.error('添加抽检比例信息失败')
          }
          this.$message.success('添加抽检比例信息成功')
          this.addDialogVisible = false
          this.searchSamplingRecord()
        })
      },
      // 修改数据保存
      editSamplingContent() {
        this.$refs.editSamplingFormRef.validate(async valid => {
          if (!valid) {
            return
          }
          const {
            data: res
          } = await
          this.$http.post('/ProductManagment/SampleRateSetting/UpdateSamplingInfo', this.editSamplingForm)
          if (res.meta.status !== 200) {
            this.$message.error('修改抽检规则数据失败')
            return
          }
          this.$message.success('修改抽检规则成功')
          this.editDialogVisible = false
          this.searchSamplingRecord()
        })
      },
      deleteSampling(obj) {
        this.$confirm('此操作将永久删除该抽检规则, 是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(async () => {
          console.log(obj)
          // 后台删除
          const {
            data: res
          } = await
          this.$http.post('/ProductManagment/SampleRateSetting/DeleteSamplingInfo', obj)
          if (res.meta.status !== 200) {
            this.$message.error('删除抽检规则数据失败')
            return
          }
          // 更新用户列表
          this.$message.success('删除抽检规则数据成功')
          this.searchSamplingRecord()
        }).catch(() => {
          this.$message.info('取消删除')
        })
      },

      // 修改时间格式
      dateFormat(row, column, cellValue, index) {
        const daterc = row[column.property]
        if (daterc != null) {
          const dateMat = new Date(daterc) // parseInt(daterc.replace('/Date(', '').replace(')/', ''), 10)
          const year = dateMat.getFullYear()
          const month = dateMat.getMonth() + 1
          const day = dateMat.getDate()
          const hh = dateMat.getHours()
          const mm = dateMat.getMinutes()
          const ss = dateMat.getSeconds()
          const timeFormat = year + '-' + month.toString().PadLeft(2, '0') + '-' + day.toString().PadLeft(2, '0') +
            ' ' + hh.toString().PadLeft(2, '0') + ':' + mm.toString()
            .PadLeft(2, '0') + ':' + ss.toString().PadLeft(2, '0')
          return timeFormat
        }
      }

    },
    created() {
      this.searchSamplingRecord()
      // 获取所有权限
      // this.getPermissionList()
    }
  }

</script>

<style lang="less" scoped>
  .el-radio {
    margin: auto;
  }

</style>
